{% extends "admin/base_site_nav.html" %}
{% load i18n %}

{% block title %}{% setting 'BRANDING' %}{% endblock %}
{% block content_title %}
<div class="row">
  <div class="col-xs-12">
    <h1 style="float: left">{% trans "cockpit"|capfirst %}</h1>
    <h1 style="float: right;">
      <button class="btn btn-xs btn-primary" onclick="grid.showBucket()" data-toggle="tooltip" 
        data-placement="top" data-original-title="{% trans 'Configure time buckets'|capfirst|force_escape %}">
        <span class="fa fa-clock-o"></span>
      </button>
      <button class="btn btn-xs btn-primary"
        onclick="window.open('{% setting "DOCUMENTATION_URL" %}/docs/{% version_short %}/user-interface/cockpit.html');"
        data-toggle="tooltip" data-placement="top" data-original-title="{% trans 'help'|capfirst|force_escape %}">
        <span class="fa fa-question"></span>
      </button>
    </h1>
  </div>
</div>
{% endblock %}

{% block extrahead %}{{block.super}}
<script src="/static/js/d3.min.js"></script>
<script>
	var currency = {{currency|json}};
  $(function() {
	  dashboard.dragAndDrop();

    $("#horizonbucketsul li a").click(function(){
      $("#horizonbuckets1").html($(this).text() + '  <span class="caret"></span>');
      $("#horizonbuckets").val($(this).prop('name'));
    });

    $("#horizonunitul li a").click(function(){
      $("#horizonunit1").html($(this).text() + '  <span class="caret"></span>');
      $("#horizonunit").val($(this).prop('name'));
    });
  });
</script>
{% endblock %}

{% block content %}
{% getDashboard as dashboard hiddenwidgets %}
{% for row in dashboard %}
    <div class="row" data-cockpit-row="{{ row.rowname }}">
      <div class="col-md-11">
         <h1 style="float: left; cursor: move; text-transform: capitalize">{{ row.rowname }}</h1>
      </div>
	  <div class="col-md-1">
	     <h1 class="pull-right">
	      <button class="btn btn-xs btn-primary" onclick="dashboard.customize('{{ row.rowname }}')" data-toggle="tooltip" data-placement="top" data-original-title="{% trans 'customize'|capfirst|force_escape %}"><span class="fa fa-wrench"></span></button>
	     </h1>
      </div>

	    <div class="horizontal-form"  id="{{ row.rowname }}">
					{% for cols in row.cols %}
					<div class="cockpitcolumn col-md-{{cols.width}} col-sm-12">
						  {% for widget in cols.widgets %}
						  <div class="panel panel-default" data-cockpit-widget="{{widget.name}}">
							  <div class="panel-heading" data-toggle="tooltip" data-placement="top" title="{{widget.tooltip|escape}}">
							        <span class='fa fa-times pull-right panel-close'></span>
							        <span class='fa fa-minus pull-right panel-toggle'></span>
							        {% if widget.exporturl %}<a href="{{request.prefix}}{{widget.url}}&amp;format=spreadsheet"><span class='fa fa-arrow-down pull-right portlet-export'></span></a>
						            {% endif %}
						            {% if widget.url %}<a class="underline" href="{{request.prefix}}{{widget.url}}">{{widget.title|upper}}&nbsp;<span class="fa fa-caret-right"></span></a>
								    {% else %}<span style="cursor: default">{{widget.title|upper}}</span>
								    {% endif %}
							  </div>
							  <div class="panel-body">
							    {% if widget.asynchronous %}
							    <div id="widget_{{widget.name}}" style="text-align:center"><img src="{{STATIC_URL}}img/loading.gif" height="32" alt="loading">
							    </div>
							    {% else %}{{widget.render|safe}}{% endif %}
						    </div>
						  </div>
						  {% endfor %}
					</div>
			    {% endfor %}
	    </div>
      </div>

		{% for col in row.cols %}
		  {% if forloop.first %}<script>{% endif %}
				{% for widget in col.widgets %}
			     {% if widget.asynchronous %}$.ajax({
				      url: "{{request.prefix}}/widget/{{widget.name}}/{{widget.args}}",
				      type: "GET",
				      success: function (data) {
				        $("#widget_{{widget.name}}").parent().html(data);
				        {{widget.javascript|safe}}
				        },
				      error: function (result, stat, errorThrown) {
				        $("#widget_{{widget.name}}").parent().html("{% trans "failed"|capfirst %}");
				        }
				    });
				  {% else %}{{widget.javascript|safe}}
				  {% endif %}
			  {% endfor %}
				{% if forloop.last %}</script>{% endif %}
		  {% endfor %}
		{% endfor %}
		{% include "admin/subtemplate_timebuckets.html" %}
<script>
var hiddenwidgets = [
{% for key, value in hiddenwidgets.items%}{% if not forloop.first %},
{% endif %}  ["{{key|escapejs}}","{{value.title|escapejs}}"]{% endfor %}
];
</script>
{% endblock %}
